<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        .form-control {
            width: 265px;
            display: inline-block;
            height: 40px;
        }

        #countyQuery h4 {
            text-align: center;
        }

        textarea {
            width: 300px;
        }

        .lh-1 tr {
            height: 50px;
        }
        .btn-sm{
            margin-right: 30px;
        }
        #result{
            text-align: right;
        }
        .showCount{
            color: red;
            font-size: 20px;
        }
        .table td{
            vertical-align: middle;
            text-align: center;
        }
    </style>

</head>
<body>
<button type="button"
        class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#countyModal">修改</button>
<div id="countyQuery">
    <h4>区县信息查询</h4>
    省：<input  type="text" id="provName" class="form-control" name="provName"/>
    &nbsp;市：<input  type="text" id="city" class="form-control" name="city"/>
    &nbsp;县：<input  type="text" id="county" class="form-control" name="county"/>
    <input type="button" id="btnQuery" class="btn btn-primary btn-sm" value="查询">
    <div id="result">本次查询共<span class="showCount" id="pageCount"></span>页，
        <span class="showCount" id="listCount"></span>条记录
    </div>
</div>
<div class="countyShow">
    <table class="table table-hover">
        <tr class="table-active">
            <td>编号</td>
            <td>省</td>
            <td>市</td>
            <td>县</td>
            <td>备注</td>
            <td>操作</td>
        </tr>
        <tbody id="tbcounty"></tbody>
    </table>
</div>
<nav aria-label="Page navigation example">
    <ul class="pagination"></ul>
</nav>

<!--js代码-->
<script>
    $(function() {
        $("#btnQuery").on("click",function (){
            findCountyByCity(1,8);
        })
    })

    function findCountyByCity(page,size) {
        $.get(
            "/county/findCountyByCity",
            {provName:$("#provName").val(),city:$("#city").val(),page:page,size:size},
            function(pageInfo) {
                let tb = $("#tbcounty");
                tb.empty();
                let dlist=pageInfo.list;
                for (let i in dlist) {
                    let tr = `<tr>
                                   <td>${dlist[i].couId} </td>
                                   <td>${dlist[i].provName} </td>
                                   <td>${dlist[i].city} </td>
                                   <td>${dlist[i].county} </td>
                                   <td>${dlist[i].memo} </td>
                                   <td><button type="button" onclick="findCountyById(${dlist[i].couId})"
                                    class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#countyModal">修改</button>
                                    <button type="button" onclick="countyDel(${dlist[i].couId})"
                                    class="btn btn-primary btn-sm">删除</button>
                                   </td>
                                </tr>`;
                    tb.append(tr);
                    let liFirst=pageInfo.isFirstPage?"":`<li class="page-item"><a class="page-link" href="javascript:findCountyByCity(${page-1},${size})">上一页</a></li>`;

                    let li="";
                    for(let i in pageInfo.navigatepageNums) {
                        let pn=pageInfo.navigatepageNums[i];
                        li += `<li class="page-item"><a class="page-link" href="javascript:findCountyByCity(${pn},${size})">${pn}</a></li>`
                    }
                    let liLast=pageInfo.isLastPage?"":`<li class="page-item"><a class="page-link" href="javascript:findCountyByCity(${page+1},${size})">下一页</a></li>`;
                    $(".pagination").empty();
                    $(".pagination").append(liFirst+li+liLast);
                    $("#pageCount").html(pageInfo.pages);
                    $("#listCount").html(pageInfo.total);
                }
            }, 'json'
        );
    }

    function findCountyById(couId){
        $.get(
            "/county/findCountyById",
            {couId:couId},
            function (county){
                console.log(county);
                addFormData("countyForm",county);
                findCity(county.pid);//按照传来的省Id查询市
                $('#cid').val(county.cid);//给市下拉框赋值，选中指定的市
            }
        );
    }

    function countyDel(mid) {
        let del=confirm("你真的要删除这个县么？");
        if(!del){
            return;
        }
        $.get(
            '/county/countyDel', {
                couId: mid
            },
            function(n) {
                findCountyDesc();
            }
        );
    }
</script>

<!-- Modal -->
<div class="modal fade" id="countyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改县信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="countyForm">
                    <input type="hidden" name="couId">
                    <table class="lh-1" >
                        <tr>
                            <td>省：</td>
                            <td><select id="pid" name="pid" class="form-control"></select></td>
                        </tr>
                        <tr>
                            <td>市：</td>
                            <td><select id="cid" name="cid" class="form-control"></select></td>
                        </tr>
                        <tr>
                            <td>县：</td>

                            <td><input name="county" id="county" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>备注：</td>
                            <td>
                                <textarea name="memo" id="memo" rows="3" class="form-control"></textarea>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="updateDoctor()" class="btn btn-primary" data-dismiss="modal">修改</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        findProvince();
    })
    function findProvince() {
        $.get(
            "/prov/findProvince",
            function(plist) {
                addSelect("pid", plist, 'pid', 'provName');
            }, 'json'
        )
    }

    function findCity(pid) {

        $.ajax({
                url: "/city/findCity",
                data: {
                    pid: pid
                },
                async:false,
                success:function(clist) {
                    addSelect('cid', clist, 'cid', 'city');
                },
                dataType:'json'
            }
        );
    }
</script>

</body>
</html>